<template>
  <div class="contents-container">
    <div class="search-area">
      <span class="lable-span"><i class="el-icon-search" /> 关键字</span>
      <el-input v-model="listQuery.str" style="width: 180px;" size="mini" placeholder="请输入用户进行查询"
        @change="getListData" />
      <span class="lable-span"><i class="el-icon-search" /> 类型</span>
      <el-select v-model="listQuery.ctcType" size="mini" style="width: 180px;" placeholder="请选择项目类型"
        @change="getListData">
        <el-option label="所有项目类型" :value="defaultValue" />
        <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
      </el-select>
      <span class="lable-span"><i class="el-icon-search" /> 状态</span>
      <el-select v-model="listQuery.ctcProgress" size="mini" style="width: 180px;" placeholder="请选择项目类型"
        @change="getListData">
        <el-option label="所有项目状态" :value="defaultValue" />
        <el-option v-for="item in stateList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
      </el-select>
      <el-button size="mini" class="ml-15" type="primary" @click="getListData(1)">查询</el-button>
      <el-button size="mini" class="ml-15" @click="research">重置</el-button>
      <el-button size="mini" class="ml-15" type="success" @click="addData">新增</el-button>
    </div>
    <!-- 列表 -->
    <el-table :data="listData" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="项目名称">
        <template slot-scope="scope">
          <span style="color:#409EFF;cursor:pointer;"
            @click="handleGetDetail(scope.row.ctcid,'detail')">{{ scope.row.ctcName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目地址">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目类型" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcType===1?'半包':scope.row.ctcType===2?'全包':'' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业主" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.userArray }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开工日期" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目状态" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.ctcProgress==0?'进行中':scope.row.ctcProgress==1?'完工':'' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
            @click="handleFlowSet(scope.row.ctcid,scope.row.flowId,scope.row.ctcName)">项目流程设置</el-button>
          <el-button type="primary" size="mini" @click="handleGetDetail(scope.row.ctcid,'edit')">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeleted(scope.row.ctcid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改 -->
    <PopWindow v-show="showForm" :title="title" :mode="modeValue" @close="closeForm" @addHandle="addHandle"
      @updateHandle="updateHandle">
      <el-form ref="formData" :model="formData" label-width="100px" size="small" :rules="formDataRules">
        <el-form-item label="项目名称" prop="ctcName">
          <el-input v-model="formData.ctcName" class="my-input" />
        </el-form-item>
        <el-form-item label="项目地址" prop="ctcAddress">
          <el-input v-model="formData.ctcAddress" class="my-input" />
        </el-form-item>
        <el-form-item label="项目描述" prop="ctcDesc">
          <el-input v-model="formData.ctcDesc" type="textarea" resize="none" :rows="3" />
        </el-form-item>
        <el-form-item label="关联流程" prop="flowId">
          <el-select v-model="formData.flowId" placeholder="请选择项目类型" style="width: 100%;">
            <el-option v-for="item in flowSelect" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="ctcType">
              <el-select v-model="formData.ctcType" placeholder="请选择项目类型" style="width: 100%;">
                <el-option label=" " :value="0" />
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="开工日期" prop="startTime">
              <el-date-picker v-model="formData.startTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                style="width: 100%;" />
            </el-form-item>
            <el-form-item label="预计完工日期" prop="forecastTime">
              <el-date-picker v-model="formData.forecastTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业主" prop="userlist">
              <el-select v-model="formData.userslist" multiple placeholder="请选择业主" style="width: 100%;">
                <el-option v-for="item in userlist" :key="item.userId" :label="item.perName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计师" prop="desiglist">
              <el-select v-model="formData.designPapers" multiple placeholder="请选择设计师" style="width: 100%;">
                <el-option v-for="item in desiglist" :key="item.userId" :label="item.perName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="监理" prop="suplist">
              <el-select v-model="formData.suplist" multiple placeholder="请选择监理" style="width: 100%;">
                <el-option v-for="item in suplist" :key="item.userId" :label="item.perName" :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="材料预览表" prop="matlist">
          <div style="display:flex;flex-direction: row;flex-wrap: wrap;" class="newAddImg">
            <!-- <el-image v-if="savedImg.length>0" :key="index" :src="$urlHost+item" v-for="(item,index) in savedImg"
              :preview-src-list="srcList" alt="" @click="gteImgList($urlHost+ item)" /> -->
            <el-upload ref="upcards" :action="$uploadImg" list-type="picture-card" name="files" multiple
              :file-list="fileLists" :on-preview="handlePictureCardPreview" :on-success="handleSuccess"
              :before-upload="beforeUpload" :on-remove="handleRemove">
              <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>

        </el-form-item>
        <!--        <el-form-item label="工期计划">
          <el-upload ref="upcards" :action="$uploadImg" list-type="picture-card" name="files" multiple
            :on-preview="handlePictureCardPreview" :on-success="handleSuccesss" :before-upload="beforeUpload"
            :on-remove="handleRemoves" :file-list="fileLists">
            <i class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark" class="my-input" />
        </el-form-item>
      </el-form>

    </PopWindow>
    <PopWindow v-show="showDetail" title="项目详情" mode="detail" @close="closeForm">
      <el-form ref="formData" :model="formData" label-width="100px" size="small" class="detail">
        <el-form-item label="项目名称">
          <el-input v-model="formData.ctcName" class="my-input detailInput" readonly />
        </el-form-item>
        <el-form-item label="项目地址">
          <el-input v-model="formData.ctcAddress" class="my-input  detailInput" readonly />
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input v-model="formData.ctcDesc" type="textarea" resize="none" readonly class="detailInput" />
        </el-form-item>
        <el-form-item label="关联流程">
          <el-select v-model="formData.flowId" placeholder="请选择项目类型" style="width: 100%;" disabled>
            <el-option v-for="item in flowSelect" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型">
              <el-select v-model="formData.ctcType" placeholder="请选择项目类型" style="width: 100%;" disabled>
                <el-option v-for="item in typeList" :key="item.SubNum" :label="item.SubName" :value="item.SubNum" />
              </el-select>
            </el-form-item>
            <el-form-item label="开工日期">
              <el-date-picker v-model="formData.startTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                disabled style="width: 100%;" />
            </el-form-item>
            <el-form-item label="预计完工日期">
              <el-date-picker v-model="formData.forecastTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                style="width: 100%;" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业主">
              <el-select v-model="formData.userslist" multiple placeholder="请选择业主" style="width: 100%;" disabled>
                <el-option v-for="item in userlist" :key="item.userId" :label="item.perName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="设计师">
              <el-select v-model="formData.designPapers" multiple placeholder="请选择设计师" style="width: 100%;" disabled>
                <el-option v-for="item in desiglist" :key="item.userId" :label="item.perName" :value="item.userId" />
              </el-select>
            </el-form-item>
            <el-form-item label="监理">
              <el-select v-model="formData.suplist" multiple placeholder="请选择监理" style="width: 100%;" disabled>
                <el-option v-for="item in suplist" :key="item.userId" :label="item.perName" :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="材料预览表">
          <div style="display:flex;flex-direction: row;flex-wrap: wrap;" class="newAddImg">
            <el-image v-if="formData.matlist&&formData.matlist.length>0" :key="'matlist'+index" :src="$urlHost+item"
              v-for="(item,index) in formData.matlist" :preview-src-list="srcList" alt=""
              @click="gteImgList($urlHost+ item)" />
            <div v-if="!formData.matlist||formData.matlist.length==0">暂无</div>
          </div>
        </el-form-item>
        <!--        <el-form-item label="工期计划">
          <div style="display:flex;flex-direction: row;flex-wrap: wrap;">
            <el-image v-if="formData.ctcPlan&&formData.ctcPlan.length>0" v-for="(item,index) in formData.ctcPlan"
            :preview-src-list="srcList" alt="" @click="gteImgList($urlHost+ item)" 
              :key="'ctcPlan'+index" :src="$urlHost+item" style="width:74px,height:74px;" />
            <div v-if="!formData.ctcPlan||formData.ctcPlan.length==0">暂无</div>
          </div>
        </el-form-item> -->
        <el-form-item label="流程阶段"
          v-if="formData.flowlist&&formData.flowlist.phaselist&&formData.flowlist.phaselist.length>0">
          <el-timeline>
            <el-timeline-item v-for="(state, index) in formData.flowlist.phaselist" :key="index" placement="top"
              :timestamp="(index+1)+' '+ state.phaseName">
              <el-card v-if="state.userlist.length>0">
                <el-row v-if="state.startTime||state.endTime">
                  <el-col :span="10">
                    <el-form-item label="开工日期">
                      <el-date-picker v-model="state.startTime" type="date" value-format="yyyy-MM-dd"
                        :disabled="state.vaildFlag >1" disabled style="width: 100%;" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="完工日期">
                      <el-date-picker v-model="state.endTime" type="date" value-format="yyyy-MM-dd"
                        :disabled="state.vaildFlag >1" disabled style="width: 100%;" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-if="state.userlist&&state.userlist.length>0" v-for="(user, indexs) in state.userlist"
                  :key="indexs">
                  <el-col :span="10" v-if="user.ctcUserType">
                    <el-form-item label="师傅类型" :rules="{ required: true, message: '请选择师傅类型', trigger: 'blur'}">
                      <el-select v-model="user.ctcUserType" style="width: 100%;" :disabled="state.vaildFlag >1"
                        disabled>
                        <el-option v-for="j in userTypeList" :key="j.val" :label="j.name" :value="j.val" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" v-if="user.ctcUserType">
                    <el-form-item label="师傅名称" :rules="{ required: true, message: '请选择师傅', trigger: 'blur'}">
                      <el-select v-model="user.perId" style="width: 100%;" :disabled="state.vaildFlag >1" disabled>
                        <el-option v-for="i in phaselist" :key="i.userId" :label="i.perName" :value="i.userId" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" class="my-input detailInput" readonly />
        </el-form-item>
      </el-form>

    </PopWindow>
    <pagination v-show="total > 0" :total="total" :page-size.sync="listQuery.limit" :page-index.sync="listQuery.page"
      @pagination="getListData(listQuery.page)" />
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%">
      <el-image fit="contain" style="width:100%;height:100%;" :src="dialogImageUrl" alt />
    </el-dialog>
    <RelateFlow :dialog-show.sync="flowDialog" :info-data="relateForm" />
  </div>
</template>

<script>
  import {
    nowTime
  } from '@/utils/index.js'
  import RelateFlow from './components/relateFlow'
  import Pagination from '@/components/Pagination'
  import PopWindow from '@/components/PopWindow'
  import {
    addProject,
    editProject,
    deleteProject,
    getProjectList,
    getProjectDetail,
    getFlowSelect
  } from '@/api/proList'
  import {
    getUserList
  } from '@/api/user'
  export default {
    name: 'Project',
    components: {
      Pagination,
      PopWindow,
      RelateFlow
    },
    data() {
      return {
        dialogVisible: false,
        flowDialog: false,
        srcList: [],
        flowId: '',
        projectId: '',
        dialogImageUrl: '',
        editable: false, // 日期选择器不可手动写入
        total: 0, // 总数
        selectList: [],
        showDetail: false,
        defaultValue: -1,
        userlist: [],
        desiglist: [],
        phaselist: [],
        suplist: [],
        adminList: [], // 管理
        listData: [],
        matFileList: [],
        serchName: '',
        fileList: [],
        fileLists: [],
        matlist: [], // 材料预览表
        userTypeList: [{
          val: 10,
          name: '其他师傅'
        }, {
          val: 11,
          name: '搬运师傅'
        }, {
          val: 12,
          name: '敲打师傅'
        }, {
          val: 13,
          name: '泥水师傅'
        }, {
          val: 14,
          name: '水电师傅'
        }, {
          val: 15,
          name: '防水师傅'
        }, {
          val: 16,
          name: '木作师傅'
        }],
        typeList: [{
            SubName: '半包',
            SubNum: 1
          },
          {
            SubName: '全包',
            SubNum: 2
          }
        ],
        stateList: [{
            SubName: '未完工',
            SubNum: 0
          },
          {
            SubName: '已完工',
            SubNum: 1
          }
        ],
        listQuery: {
          str: '', // 关键字
          ctcType: -1, // 类型
          ctcProgress: -1, // 状态
          page: 1,
          limit: 10
        },
        savedImg: [],
        showForm: false, // 新增修改弹窗显示否
        title: '新增',
        modeValue: 'add',
        flowSelect: [],
        formData: {
          ctcName: '', // 项目名称
          ctcAddress: '', // 项目标题
          ctcType: '', // 项目类型
          ctcDesc: '', // 项目描述
          flowId: '',
          userslist: [], // 业主
          matlist: [], // 材料预览表
          designPapers: [], // 设计师
          suplist: [], // 监理
          remark: '', // 备注
          ctcPlan: [], // 工期计划
          flowlist: [{

          }],
          startTime: nowTime('date'), // 开工时间
          forecastTime: '', // 预计完工时间
          endTime: ''
        },
        relateForm: {
          flowId: '',
          ctcId: '',
          proName: ''
        },
        // 表单验证规则
        formDataRules: {
          ctcName: [{
              required: true,
              message: '请输入项目名称',
              trigger: 'blur'
            },
            {
              max: 100,
              message: '项目名称100个字内',
              trigger: 'blur'
            }
          ],
          ctcAddress: [{
            required: true,
            message: '请输入项目地址',
            trigger: 'blur'
          }, {
            max: 100,
            message: '项目地址100个字内',
            trigger: 'blur'
          }],
          ctcDesc: [{
            max: 300,
            message: '项目描述300个字内',
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            message: '请选择项目开始时间',
            trigger: 'blur,change'
          }],
          remark: {
            max: 300,
            message: '请输入1-300个字',
            trigger: 'blur'
          }
        }
      }
    },
    mounted() {
      this.getListData()
      this.getFlowSelect()
      this.getSelectList()
    },
    methods: {
      getSelectList() {
        // 获取下拉数据
        getUserList({
          pageIndex: 1, // 当前页码
          pageSize: 999, // 每页数量
          perType: -1 // 用户角色
        }).then(res => {
          this.selectList = res.data
          this.adminList = this.selectList.filter(item => item.perType === 0)
          this.phaselist = this.selectList.filter(item => item.perType === 1)
          this.suplist = this.selectList.filter(item => item.perType === 2)
          this.userlist = this.selectList.filter(item => item.perType === 3)
          this.desiglist = this.selectList.filter(item => item.perType === 4)
        })
      },
      getFlowSelect() {
        // 流程下拉
        getFlowSelect({}).then(res => {
          this.flowSelect = res.data
        })
      },
      gteImgList(url) {
        this.srcList = []
        this.srcList.push(url)
      },
      handleFlowSet(id, flow, name) {
        if (!flow) {
          this.$message({
            type: 'error',
            message: '请先关联流程'
          })
          return
        }
        this.relateForm.flowId = flow
        this.relateForm.ctcId = id
        this.relateForm.proName = name
        this.flowDialog = true
      },
      getListData(page) {
        const that = this
        that.$loadings()
        that.listQuery.page = page || 1
        getProjectList(that.listQuery).then((res) => {
          that.$loadings().close()
          that.listData = res.data
          that.page = page
          that.total = res.count
        }).catch(() => {
          that.$loadings().close()
        })
      },

      resetTemp() {
        this.title = ''
        this.fileLists = []
        this.savedImg = []
        this.formData = {
          ctcName: '', // 项目名称
          ctcAddress: '', // 项目标题
          ctcType: '', // 项目类型
          ctcDesc: '', // 项目描述
          flowId: '',
          userslist: [], // 业主
          matlist: [], // 材料预览表
          designPapers: [], // 设计师
          suplist: [], // 监理
          remark: '', // 备注
          ctcPlan: [], // 工期计划
          endTime: '2021-12-31',
          startTime: nowTime('date'), // 开工时间
          forecastTime: '', // 预计完工时间
          flowlist: [{
            phaselist: {
              userList: {}
            }
          }]
        }
      },
      addData() {
        this.resetTemp()
        this.title = '项目新增'
        this.modeValue = 'add'
        this.$nextTick(() => {
          this.$refs['formData'].clearValidate()
          this.showForm = true
        })
      },
      addHandle() {
        var that = this
        that.formData.matlist = that.savedImg
        that.$refs.formData.validate(valid => {
          if (valid) {
            that.$loadings()
            addProject(that.formData).then(data => {
                that.$loadings().close()
                that.$message({
                  type: 'success',
                  message: '添加成功!'
                })
                that.getListData()
                that.closeForm() // 重置表单
              })
              .catch(() => {
                that.resetTemp()
                that.$loadings().close()
              })
          } else {
            return false
          }
        })
        this.showForm = false
      },
      research() {
        this.listQuery = {
          str: '', // 关键字
          ctcType: -1, // 类型
          ctcProgress: -1, // 状态
          page: 1,
          limit: 10
        }
        this.getListData(1)
      },
      closeForm() {
        this.resetTemp()
        this.showForm = false
        this.showDetail = false
      },
      updateHandle() {
        var that = this
        that.formData.matlist = that.savedImg
        that.$refs.formData.validate(valid => {
          if (valid) {
            that.$loadings()
            editProject(that.formData).then(data => {
                that.$loadings().close()
                that.$message({
                  type: 'success',
                  message: '操作成功!'
                })
                that.getListData()
                that.closeForm() // 重置表单
              })
              .catch(() => {
                that.$loadings().close()
              })
          } else {
            return false
          }
        })
        that.showForm = false
      },
      handleGetDetail(id, type) {
        const that = this
        that.$loadings()
        getProjectDetail({
          ctcid: id
        }).then((res) => {
          that.$loadings().close()
          that.formData = {
            ctcid: res.data.ctcid,
            flowId: res.data.flowId,
            ctcName: res.data.ctcName, // 项目名称
            ctcAddress: res.data.ctcAddress, // 项目标题
            ctcType: res.data.ctcType, // 项目类型
            ctcDesc: res.data.ctcDesc, // 项目描述
            userslist: res.data.userslist, // 业主
            matlist: res.data.matlist, // 材料预览表
            endTime: res.data.endTime,
            designPapers: res.data.designPapers, // 设计师
            suplist: res.data.suplist, // 监理
            remark: res.data.remark, // 备注
            ctcPlan: [], // 工期计划
            startTime: res.data.startTime, // 开工时间
            forecastTime: res.data.forecastTime, // 预计完工时间
            flowlist: res.data.flowlist
          }
          res.data.matlist.map(item => {
            that.fileLists.push({
              uid: item,
              url: that.$urlHost + item
            })
          })
          that.savedImg = res.data.matlist
          if (type == 'edit') {
            that.modeValue = 'edit'
            that.title = '项目修改'
            that.showForm = true
          } else if (type == 'detail') {
            that.showDetail = true
          }
        }).catch((err) => {
          that.$loadings().close()
          console.log(err)
        })
      },

      handleDeleted(id) {
        const that = this
        console.log(id)
        that.$confirm('是否删除该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            that.$loadings()
            deleteProject({
              ctcid: id
            }).then((res) => {
              that.$loadings().close()
              that.$message({
                type: 'success',
                message: '操作成功!'
              })
              that.getListData()
            }).catch(() => {
              that.$loadings().close()
            })
          })
      },
      // 图片上传前回调
      beforeUpload(file) {
        this.imgLoding = this.$loading({
          lock: true,
          text: '图片上传中···',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
        const isPNG = file.type === 'image/png'
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 10

        if (!isPNG && !isJPG) {
          this.$message.error('上传图片只能是 PNG或JPG 格式!')
          this.imgLoding.close()
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
          this.imgLoding.close()
        }
        return (isPNG || isJPG) && isLt2M
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleSuccess(file, fileList) {
        this.imgLoding.close()
        this.savedImg.push(fileList.response.data[0])
      },
      // 图片 Remove
      handleRemove(file, fileList) {
        if (file.status == 'success') {
          let arr = []
          fileList.forEach(element => {
            this.savedImg.map(item => {
              if (element.response) {
                if (item == element.response.data[0]) {
                  arr.push(item)
                }
              } else {
                if (item == element.uid) {
                  arr.push(item)
                }
              }
            })
          })
          this.savedImg = arr
          if (fileList.length === 0) this.savedImg = []
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .avatar {
    width: 45%;
    margin-left: 1%;
    float: left;
    margin-top: 10px;
  }

  ::v-deep {

    .detailInput .el-input__inner,
    .detailInput .el-textarea__inner {
      border: none;
    }

    .detail .el-form-item,
    .detail .el-form-item--mini.el-form-item,
    .detail .el-form-item--small.el-form-item {
      margin-bottom: 8px;
    }

  }

  ::v-deep .newAddImg .el-image {
    width: 148px;
    height: 148x;
    margin-right: 20px;
    margin-top: 10px;
  }
</style>
